<template>
  <div class="parent d-flex jc-around">
    <div class="left mr-20 d-flex flex-column">
      <div class="d-flex">
        <div class="card" style="height: 200px; margin-right: 20px">
          <div class="d-flex ai-center" style="margin-bottom: 10px">
            <div class="card-img white"></div>
            <div class="card-content">
              <div>35{{ $t("ele_title") }}</div>
            </div>
          </div>
          <div class="">
            <div class="info">
              {{ $t("ele_renshuo") }}
              <span style="margin-left: 0px 5px; color: #1abc9c">{{
                jsonData[1].pcount
              }}</span>
              人
            </div>
            <div class="info">
              {{ $t("ele_shijian") }}
              <span style="margin-left: 0px 5px; color: #1abc9c">{{
                jsonData[1].runTime
              }}</span>
              {{ $t("ele_fenzhong") }}
            </div>
            <div class="info">
              {{ $t("ele_cishuo") }}
              <span style="margin-left: 0px 5px; color: #1abc9c">{{
                jsonData[1].runTm
              }}</span>
              次
            </div>
          </div>
        </div>

        <div class="card" style="height: 200px; margin-right: 20px">
          <div class="d-flex ai-center" style="margin-bottom: 10px">
            <div class="card-img jinritongxing"></div>
            <div class="card-content">
              <div>36{{ $t("ele_title") }}</div>
            </div>
          </div>
          <div class="">
            <div class="info">
              {{ $t("ele_renshuo") }}
              <span style="margin-left: 0px 5px; color: #1abc9c">{{
                jsonData[2].pcount
              }}</span>
              人
            </div>
            <div class="info">
              {{ $t("ele_shijian") }}
              <span style="margin-left: 0px 5px; color: #1abc9c">{{
                jsonData[2].runTime
              }}</span>
              {{ $t("ele_fenzhong") }}
            </div>
            <div class="info">
              {{ $t("ele_cishuo") }}
              <span style="margin-left: 0px 5px; color: #1abc9c">{{
                jsonData[2].runTm
              }}</span>
              次
            </div>
          </div>
        </div>
        <div class="card" style="height: 200px; margin-right: 20px">
          <div class="d-flex ai-center" style="margin-bottom: 10px">
            <div class="card-img moshengren"></div>
            <div class="card-content">
              <div>37{{ $t("ele_title") }}</div>
            </div>
          </div>
          <div class="">
            <div class="info">
              {{ $t("ele_renshuo") }}
              <span style="margin-left: 0px 5px; color: #1abc9c">{{
                jsonData[3].pcount
              }}</span>
              人
            </div>
            <div class="info">
              {{ $t("ele_shijian") }}
              <span style="margin-left: 0px 5px; color: #1abc9c">{{
                jsonData[3].runTime
              }}</span>
              {{ $t("ele_fenzhong") }}
            </div>
            <div class="info">
              {{ $t("ele_cishuo") }}
              <span style="margin-left: 0px 5px; color: #1abc9c">{{
                jsonData[3].runTm
              }}</span>
              次
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPersonCount } from "./service";

export default {
  components: {},
  data() {
    return {
      jsonData: {
        2: { pcount: 0, runTime: 0, runTm: 0 },
        3: { pcount: 0, runTime: 0, runTm: 0 },
        4: { pcount: 0, runTime: 0, runTm: 0 },
      },
    };
  },
  mounted() {
    this.startGetReport();
  },
  computed: {
    language() {
      //   return this.$store.state.language;
    },
  },
  methods: {
    getPerson() {
      getPersonCount().then((res) => {
        console.log(res.data);
        this.jsonData = res.data;
      });
    },
    startGetReport() {
      this.intervalId = setInterval(() => {
        this.getPerson();
      }, 5000); // 每 2000 毫秒（2 秒）执行一次
    },
  },
};
</script>

<style lang="less" scoped>
.parent {
  width: 100%;
  height: 100%;
  font-size: 14px;
  background: #e8ebf0;
  padding: 20px;
  overflow: auto;
  .left,
  .right {
    height: 100%;
  }
  .right {
    display: flex;
    flex-direction: column;
    &-top {
      flex: 1;
      width: 100%;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      &-content {
        overflow: auto;
        flex: 1;
        .alarm-item {
          transition: all 0.5s;
          z-index: 9;
          &.slide-fade-enter-active {
            transition: all 0.3s ease;
          }
          &.slide-fade-leave-active {
            transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
          }
          &.slide-fade-enter {
            transform: translateY(-100%);
            opacity: 0;
          }
          &.slide-fade-leave-to {
            scale: 0.5;
            transform: translateY(100%) translateX(100%);
            opacity: 0;
          }
        }
      }
      /deep/ .el-popover__reference-wrapper {
        vertical-align: -webkit-baseline-middle;
      }
    }
    &-bottom {
      flex: 1;
      width: 100%;
      background: #fff;
      border-radius: 10px;
      overflow: hidden;
      min-height: 400px;
      &-content {
        flex-wrap: wrap;
        overflow: auto;
        flex: 1;
        .img-box {
          flex-wrap: nowrap;
          overflow: auto;
          border-top: 1px solid #ccc;
          flex: 1;
          align-items: center;
          .img-item {
            transition: all 0.5s;
            width: 70px;
            height: 90px;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-right: 10px;
            z-index: 9;
            /* 可以设置不同的进入和离开动画 */
            /* 设置持续时间和动画函数 */
            &.slide-fade-enter-active {
              transition: all 0.3s ease;
            }
            &.slide-fade-leave-active {
              transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
            }
            &.slide-fade-enter {
              transform: translateX(-100%);
              opacity: 0;
            }
            &.slide-fade-leave-to {
              transform: translateX(100%);
              opacity: 0;
            }
          }
        }
      }
    }
    .title {
      width: 100%;
      height: 56px;
      line-height: 56px;
      position: relative;
      background: #fcfcfd;
      font-size: 20px;
      .title-right {
        img {
          width: 27px;
          height: 24px;
          cursor: pointer;
        }
      }
      .divider {
        background-image: linear-gradient(
          180deg,
          rgba(45, 204, 112, 1) 0,
          rgba(52, 152, 219, 1) 100%
        );
        border-radius: 4px;
        width: 4px;
        height: 20px;
        margin-right: 10px;
      }
    }
  }
  .left {
    flex: 1.1;
    &-top {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: center;
    }
    &-bottom {
      display: flex;
      flex-direction: column;
      padding: 20px;
      background: #fff;
      border-radius: 10px;
      .video-box {
        width: 834px;
        height: 500px;
        flex-wrap: wrap;
        .video-item {
          width: 100%;
          height: 100%;
          &.empty {
            background: #ccc;
          }
          &.w50 {
            width: 50%;
            height: 50%;
          }
          &.w100 {
            width: 100%;
            height: 100%;
          }
        }
      }
    }
  }
  .card {
    margin-bottom: 10px;
    background-image: linear-gradient(
      181deg,
      rgba(255, 255, 255, 1) 0,
      rgba(255, 255, 255, 1) 53.877217%,
      rgba(239, 244, 255, 1) 100%
    );
    border-radius: 8px;
    width: 33%;
    height: 110px;
    padding: 20px;
    border: 1px solid rgba(96, 97, 112, 0.07058823853731155);
    &-img {
      width: 64px;
      height: 64px;
    }
    &-number {
      font-size: 26px;
      line-height: 26px;
      height: 26px;
    }
    &-content {
      flex: 1;
      margin-left: 20px;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: start;
      font-size: 18px;
    }
    .jinritongxing {
      background: url(../video/assets/jinritongxing.png) no-repeat;
      background-size: 100% 100%;
      &-number {
        color: rgba(0, 115, 254, 1);
      }
    }
    .white {
      background-size: 100%;
      box-shadow: 0px 6px 12px 0px rgba(6, 194, 112, 0.101961);
      background-image: linear-gradient(
        315deg,
        rgba(6, 194, 112, 1) 0,
        rgba(28, 222, 112, 1) 100%
      );
      border-radius: 16px;
      position: relative;
      &:after {
        content: "";
        background: url(../video/assets/white.png) center no-repeat;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50%;
      }
      &-number {
        color: rgba(6, 194, 112, 1);
      }
    }
    .moshengren {
      background-size: 100% 100%;
      box-shadow: 0px 6px 12px 0px rgba(255, 136, 0, 0.101961);
      background-image: linear-gradient(
        315deg,
        rgba(255, 136, 0, 1) 0,
        rgba(252, 183, 80, 1) 100%
      );
      border-radius: 16px;
      position: relative;
      &-number {
        color: rgba(255, 136, 0, 1);
      }
      &:after {
        content: "";
        background: url(../video/assets/moshengren.png) center no-repeat;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 50%;
        height: 50%;
      }
    }
    .black {
      background: url(../video/assets/black.png) no-repeat;
      background-size: 100% 100%;
      &-number {
        color: rgba(57, 72, 90, 1);
      }
    }
    .info {
      height: 30px;
      line-height: 30px;
      padding-left: 20px;
      font-size: 17px;
    }
  }
}
</style>
